<template>
  <div v-if="isLoaded">
    <svg aria-hidden="true" class="svg-icon" :class="className" @error="handleError">
      <use :href="symbolId" />
    </svg>
  </div>
  <div v-else>Loading...</div>
</template>

<script lang="ts" setup name="SvgIcon">
const props = defineProps({
  name: {
    type: String,
    required: true
  },
  className: {
    type: String,
    default: ''
  }
})

const isLoaded = ref(false);

onMounted(() => {
  isLoaded.value = true;
});

const symbolId = computed(() => `#icon-${props.name}`);

const handleError = (e: any) => {
  console.error('SVG 加载失败:', e.target.href.baseVal)
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
